<template>
  <div class="Upgrade">
      一键升级
    <div class="demo-block">
      <div>
        <el-form :model="form" class="demo-form-inline" label-width="80px" >
            <!--<el-form-item label="备份路径">
                <el-input placeholder="例:  /home/cimp/backup/backup_cimp_20181114.tar.gz" v-model="form.backup">
                </el-input>
            </el-form-item>-->
            <el-form-item label="升级方式">
            <el-radio-group v-model="form.type">
                <el-radio-button label="svn"></el-radio-button>
                <el-radio-button label="ftp"></el-radio-button>
            </el-radio-group>
            </el-form-item>
          <el-form-item label="版本包">
            <el-input placeholder="请输入内容" v-model="form.svnPath" v-if="form.type==='svn'">
              <template slot="prepend">{{svnPre}}</template>
            </el-input>
              <el-input placeholder="例: ftp://用户名:密码@IP/xxxxxx.tar.gz (不支持中文路径)" v-model="form.ftpPath" v-if="form.type==='ftp'"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :icon="icon">提交</el-button>
          </el-form-item>

        </el-form>

      </div>
      <div style="margin-top: 50px;">
        <el-steps :space="150" :active="active"  :finish-status="status"  align-center>
          <el-step title="下载"></el-step>
          <el-step title="备份"></el-step>
          <el-step title="解压"></el-step>
          <el-step title="配置" ></el-step>
          <el-step title="重新启动"></el-step>
        </el-steps>
      </div>

    </div>
  </div>
</template>

<script>
export default {
    name: 'Upgrade',
    data() {
        return {
            form: {
                type:'svn',
                backup: '',
                svnPath: '',
                ftpPath: '',
            },
            websock:'',
            isConnected:false,
            active : -1,
            status : 'success',
            svnPre : 'svn://',
            icon : 'el-icon-upload'
        }
    }
    ,created() {
        this.initWebSocket();
    }
    , destroyed() {
        this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
        onSubmit() {
            let params = {
                'type':this.form.type,
                'svnPath':this.form.svnPath,
                'ftpPath':this.form.ftpPath
            };
            if (this.isConnected) {
                this.websocketsend(JSON.stringify(params));
            }else{
                this.$notify.error({
                    title: '错误',
                    message:  '网络连接已断开.',
                    duration: 0
                });
            }
            /*let params = new URLSearchParams();
            params.append('path', this.form.path);
            this.axios.post('/tools/upgrade',params).then((response) => {
                console.log(response);
                let result = response.data;
                if(result['resultCode'] === '0'){
                    this.$message({
                        message: '提交成功，后台处理中...',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: result['resultMsg'],
                        type: 'warning'
                    });
                }
            }).catch((error) => {
                this.$notify.error({
                    title: '错误',
                    message:  error,
                    duration: 0
                });
            });*/
        }
        ,initWebSocket(){//初始化websocket
            const wsuri = "ws://49.4.7.160:58080/websocket/upgrade";
            this.websock = new WebSocket(wsuri);//这里面的this都指向vue
            this.websock.onopen = this.websocketopen;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
            this.websock.onerror = this.websocketerror;
        }
        ,websocketopen(){//打开
            this.isConnected = true;
            console.log("WebSocket连接成功")
        }
        ,websocketonmessage(e){ //数据接收
            var data = JSON.parse(e.data);
            console.log(data);
            if('ing' === data['type']){
                this.$message({
                    message: '后台任务处理中，请不要重复提交',
                    type: 'warning'
                });
            }else if('error' === data['type']){
                this.status = 'error';
                this.icon = 'el-icon-upload';
                this.$notify.error({
                    title: '错误',
                    message:  data['message'],
                    duration: 0
                });
            }else if('step' === data['type']){
                this.active = data['active'];
                if (0 === data['active']) {
                    this.$message({
                        message: '提交成功，后台处理中...',
                        type: 'success'
                    });
                    this.status = 'success';
                }
            }else if('init' === data['type']){
                let msg = JSON.parse(data['message']);
                this.svnPre = msg['svnPre'];
                this.form.svnPath = msg['svnPath'];
                this.active = msg['step'];
                if (this.active >= 1 && this.active <= 4) {
                    this.icon = 'el-icon-loading';
                }else{
                    this.icon = 'el-icon-upload';
                }
            }
        }
        ,websocketclose(){  //关闭
            this.isConnected = false;
            console.log("WebSocket关闭");
        }
        ,websocketerror(){  //失败
            this.isConnected = false;
            console.log("WebSocket连接失败");
        }
        ,websocketsend(agentData){//数据发送
            this.websock.send(agentData);
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 24px;
    margin-top: 10px;
  }
    .el-input{
        width: 80%;
    }
</style>
